<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电影售票</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="/js/top.js"></script>
    <script src="/sign/js/sign.js"></script>
    <!--    https://www.yidepiao.com/movie/4596 -->
    <style>
        *{
            padding: 0px;
           margin: 0px;
        }
        .review{
            width: 100%;
            background-color: red;
            border-radius: 5px;
            color: white;
            border-color: #FFFFFF;
            height: 54px;
        }
        .review:hover{
            color: red;
            background-color:#FFFFFF;
            border-color:red;
        }
        .content{
            width: 100%;
            display: inline-block;
            min-height:75px;
        }
        .content .son{
            width:99%;
            display: inline-block;
            min-height: 75px;
            border: 1px solid red;
            overflow: auto;
        }
        .pcontent{
            display: inline-block;
            min-height: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <top></top>
        <el-main>
            <div class="c900">
                <el-card>
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <img :src="movie.img" alt="Movie Poster">
                        </el-col>
                        <el-col :span="18">
                            <h1 style="margin: 0px">{{movie.name}}</h1>
                            <el-rate :value="4"></el-rate>
                            <div class="grid2 detail">
                                <label>上映时间：</label><time>{{movie.time}}</time>
                                <label>地区：</label><span>{{movie.area}}</span>
                                <label>类型：</label><span>{{movie.type}}</span>
                                <label>片长：</label><span>{{movie.length}}</span>
                                <label>导演：</label><span>{{movie.director}}</span>
                                <label>主演：</label><span>{{movie.actor}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
                <el-row :gutter="10">
                    <el-col :span="17">
                        <el-card>
                            <el-tabs value="1" type="card" style="min-height: 500px">
                                <el-tab-pane label="影片排期" name="1">
                                    <div class="ctrtitle">
                                        <b>石鼓区 | </b>衡阳美达国际影城<em>石鼓区解放路48号</em>
                                    </div>
                                    <el-table :data="tableData" border style="width: 100%">
                                        <el-table-column prop="time" label="放映时间" width="80"></el-table-column>
                                        <el-table-column prop="lang" label="语言/版本" width="100"></el-table-column>
                                        <el-table-column prop="hall" label="放映厅" width="159"></el-table-column>
                                        <el-table-column prop="price" label="现价（元）" width="99"  align="center"></el-table-column>
                                        <el-table-column prop="seats" label="余票" align="center"></el-table-column>
                                        <el-table-column label="购票" width="129" align="center">
                                            <template slot-scope="scope">
                                                <el-button @click="location.href='seat.html'" type="primary" size="small">购票</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <p class="payend">* 现价已包含服务费 ，该影院放映前15分钟关闭网络售票 。</p>
                                    <div class="ctrtitle">
                                        <b>雁峰区 | </b>衡阳星悦巨幕影城<em>雁峰区解放路121号宇元万向城二期4楼</em>
                                    </div>
                                    <el-table :data="tableData" border style="width: 100%">
                                        <el-table-column prop="time" label="放映时间" width="80"></el-table-column>
                                        <el-table-column prop="lang" label="语言/版本" width="100"></el-table-column>
                                        <el-table-column prop="hall" label="放映厅" width="159"></el-table-column>
                                        <el-table-column prop="price" label="现价（元）" width="99"  align="center"></el-table-column>
                                        <el-table-column prop="seats" label="余票" align="center"></el-table-column>
                                        <el-table-column label="购票" width="129" align="center">
                                            <template slot-scope="scope">
                                                <el-button @click="location.href='seat.html'" type="primary" size="small">购票</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <p class="payend">* 现价已包含服务费 ，该影院放映前15分钟关闭网络售票 。</p>
                                </el-tab-pane>
                                <el-tab-pane label="剧情介绍" name="2">{{movie.introduce}}</el-tab-pane>
                                <el-tab-pane label="精彩预告" name="3"><video :src="movie.trailers.video" controls></video></el-tab-pane>
                                <el-tab-pane label="电影剧照" name="4"><img :src="movie.stills.moviePic" alt="Movie Poster"></el-tab-pane>
                                <el-tab-pane label="网友评论" name="5">
                                    <div v-if="movieReview.length<=0">
                                        该电影还没有评论
                                    </div>
                                    <div v-else>
                                        <div class="content" v-for="item in movieReview">
                                            <div class="son" style="margin-top: 10px">
                                                <div style="position: relative">
                                                    <div>
                                                        <img :src="item.user.head" style="width: 50px;height: 50px;margin:12px;border-radius: 50% ;display: inline-block">
                                                        <h1 style="position: absolute;top:12px;left: 90px">{{item.user.name}}</h1>
                                                        <h5 style="position: absolute;top:50px;left: 90px">{{item.reviewDate}}</h5>
                                                    </div>
                                                </div>
                                                <p class="pcontent" style="margin:0px 0px 5px 10px;">{{item.reviewContent}}</p>
                                            </div>
                                        </div>
                                        <div class="final" style="display: flex;justify-content: center;margin-top: 15px">
                                            <el-pagination class="c1"
                                                           layout="prev, pager, next"
                                                           :page-size="this.mReview.size"
                                                           :current-page="this.mReview.current"
                                                           @current-change="changeCurrent"
                                                           :total="this.mReview.total"
                                            >
                                            </el-pagination>
                                        </div>
                                    </div>

                                    <!--输入框-->
                                    </el-input>
                                    <div style="margin: 20px 0;"></div>
                                    <el-input
                                            type="textarea"
                                            placeholder="请输入内容"
                                            v-model="textarea"
                                            maxlength="30"
                                            show-word-limit>
                                    </el-input>
                                    <div style="margin: 5px 0;"></div>
                                    <input type="button" value="发表" @click.prevent="send" class="review">
                                </el-tab-pane>
                            </el-tabs>
                        </el-card>
                    </el-col>
                    <el-col :span="7">
                        <el-card style="height: 100%">
                            <div slot="header" class="clearfix flex">
                                <span>正在热映</span>
                                <el-link href="hots.html" :underline="false">更多影片</el-link>
                            </div>
                            <el-row :gutter="5">
                                <el-col :span="10">
                                    <a href="detail.html"><img src="https://pic.ydpcdn.cn/pictures/movie/2024-07/2c316a38-aaf9-4e12-9524-98a930ff60bc.jpg!200"></a>
                                </el-col>
                                <el-col :span="14">
                                    <h4 style="margin: 0px">死侍与金刚狼</h4>
                                    <el-rate :value="4"></el-rate>
                                    <div class="grid2 detail">
                                        <label>类型：</label><span>喜剧/动作/科幻</span>
                                        <label>导演：</label><span>肖恩·利维</span>
                                        <label>主演：</label><span>瑞安·雷诺兹/休·杰克曼...</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <hr>
                            <el-row :gutter="5">
                                <el-col :span="10">
                                    <a href="detail.html"><img src="https://pic.ydpcdn.cn/pictures/movie/2024-07/2c316a38-aaf9-4e12-9524-98a930ff60bc.jpg!200"></a>
                                </el-col>
                                <el-col :span="14">
                                    <h4 style="margin: 0px">死侍与金刚狼</h4>
                                    <el-rate :value="4"></el-rate>
                                    <div class="grid2 detail">
                                        <label>类型：</label><span>喜剧/动作/科幻</span>
                                        <label>导演：</label><span>肖恩·利维</span>
                                        <label>主演：</label><span>瑞安·雷诺兹/休·杰克曼...</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <hr>
                            <el-row :gutter="5">
                                <el-col :span="10">
                                    <a href="detail.html"><img src="https://pic.ydpcdn.cn/pictures/movie/2024-07/2c316a38-aaf9-4e12-9524-98a930ff60bc.jpg!200"></a>
                                </el-col>
                                <el-col :span="14">
                                    <h4 style="margin: 0px">死侍与金刚狼</h4>
                                    <el-rate :value="4"></el-rate>
                                    <div class="grid2 detail">
                                        <label>类型：</label><span>喜剧/动作/科幻</span>
                                        <label>导演：</label><span>肖恩·利维</span>
                                        <label>主演：</label><span>瑞安·雷诺兹/休·杰克曼...</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <hr>
                            <el-row :gutter="5">
                                <el-col :span="10">
                                    <a href="detail.html"><img src="https://pic.ydpcdn.cn/pictures/movie/2024-07/2c316a38-aaf9-4e12-9524-98a930ff60bc.jpg!200"></a>
                                </el-col>
                                <el-col :span="14">
                                    <h4 style="margin: 0px">死侍与金刚狼</h4>
                                    <el-rate :value="4"></el-rate>
                                    <div class="grid2 detail">
                                        <label>类型：</label><span>喜剧/动作/科幻</span>
                                        <label>导演：</label><span>肖恩·利维</span>
                                        <label>主演：</label><span>瑞安·雷诺兹/休·杰克曼...</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <hr>
                            <el-row :gutter="5">
                                <el-col :span="10">
                                    <a href="detail.html"><img src="https://pic.ydpcdn.cn/pictures/movie/2024-07/2c316a38-aaf9-4e12-9524-98a930ff60bc.jpg!200"></a>
                                </el-col>
                                <el-col :span="14">
                                    <h4 style="margin: 0px">死侍与金刚狼</h4>
                                    <el-rate :value="4"></el-rate>
                                    <div class="grid2 detail">
                                        <label>类型：</label><span>喜剧/动作/科幻</span>
                                        <label>导演：</label><span>肖恩·利维</span>
                                        <label>主演：</label><span>瑞安·雷诺兹/休·杰克曼...</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            tableData:[
                {time:"13:00",lang:"英语/3D", hall:"4号厅（117座）",price:39,seats:"24 / 112"},
                {time:"15:00",lang:"英语/3D", hall:"4号厅（117座）",price:39,seats:"24 / 112"},
                {time:"17:00",lang:"英语/3D", hall:"4号厅（117座）",price:39,seats:"24 / 112"},
                {time:"19:00",lang:"英语/3D", hall:"4号厅（117座）",price:39,seats:"24 / 112"},
                {time:"21:00",lang:"英语/3D", hall:"4号厅（117座）",price:39,seats:"24 / 112"}
            ],
            movie: {},
            movieId: '' , // 通过 URL 参数传递的 ID
            movieReview:[],  //查到电影的评论
            textarea: '',   //输入框输入评论
            mReview:{current:1,size:5,total:0}    //评论的分页数据
        },
        created(){
            const urlParams = new URLSearchParams(window.location.search);
            this.movieId = urlParams.get('id');
            this.queryMovies();
            this.queryMoviesReview();
        },
        methods:{
            queryMovies() {
                axios.get(`movie/findMovieMsgById?id=${this.movieId}`,{
                }).then(res=>{
                    console.log(res.data);
                    this.movie = res.data;
                });
            },
            queryMoviesReview(){
                axios.get(`movieReview/queryReview?id=${this.movieId}&current=${this.mReview.current}&size=${this.mReview.size}`).then(res=>{
                    this.movieReview=res.data.records;
                    this.mReview.total=res.data.total;
                 //   console.log(this.movieReview);
                })
            },
            send(){
                axios.post(`movieReview/addRevies?id=${this.movieId}&content=${this.textarea}`,this.user).then(res=>{
                    if(res.data.code==0){
                        this.$alert(res.data.msg)
                    }else if(res.data.code==-1){
                        this.$alert(res.data.msg)
                    }else if(res.data.code==1){
                        this.queryMoviesReview();
                        this.textarea="";
                        this.$alert(res.data.msg);
                    }
                  //  console.log(res.data);
                })
            },
            changeCurrent(pager){
                this.mReview.current=pager;
                this.queryMoviesReview();
            },
        },

    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .el-main{
        padding: 10px 0px;
        overflow-x: hidden;
        background-image: url("https://img2.baidu.com/it/u=2454799735,2381918605&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
        background-size: cover;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 100%;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4,.flex{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .detail{
        color:#666;
        font-size: .8em;
        gap:5px;
        margin-block: 10px;
    }
    .detail>label{
        color:#999
    }
    table a{
        text-decoration: none;
        color: #fff;
        padding: 5px 10px;
        background-color: #00A0D1;
    }
    td{
        height: 50px;
    }
    td>p{
        margin: 0px;
    }
    .table_1 {
        height: 37px;
        line-height: 37px;
        background: #dff0f5;
        border: 1px #ccc solid;
        text-align: center;
        font-weight: bold;
        color: #444;
    }
    .ctrtitle{
        margin: 10px;
    }
    .ctrtitle>em{
        margin: 20px;
        font-size: .7em;
    }
    .payend{
        margin-bottom: 50px;
        background-color: #e7e4e0;
        font-size: .8em;
        color: #999;
        padding: 10px;
    }
    .el-icon-search{
        color: #666;
    }
    #name{
        color: #444444;
    }

</style>

</html>